<template>
    <el-form :inline="true" class="demo-form-inline">

        <el-form-item label="用户名称">
            <el-input v-model="formInline.roleName" clearable />
        </el-form-item>

        <el-form-item label="状态" style="width: 180px;">
            <el-select v-model="formInline.isDel" clearable>
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="2" />
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="Show">查询</el-button>
        </el-form-item>
    </el-form>



    <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item>
            <el-button plain @click="dialogFormVisible = true">添加</el-button>
        </el-form-item>

    </el-form>



    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="roleId" label="序号" />
        <el-table-column prop="roleName" label="角色名称" />
        <el-table-column prop="roleEncoding" label="角色编码" />
        <el-table-column prop="isDel" label="状态" />
        <el-table-column prop="sortingNumber" label="排序号" />
        <el-table-column prop="createTime" label="创建时间" />

        <el-table-column fixed="right" label="操作" min-width="105">
            <template v-slot="scope">
                <el-button link type="primary" size="small" @click="Upd()">编辑</el-button>
                <el-button link type="primary" size="small" @click="Select()">查看</el-button>
                <el-button link type="primary" size="small" @click="Del()">删除</el-button>
                <el-button link type="primary" size="small" @click="Assignment()">分配权限</el-button>
            </template>
        </el-table-column>

    </el-table>


    <div>
        <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.PageSize"
            :page-sizes="[10, 15, 20, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="formInline.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>





    <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
        <el-form :model="form">
            <el-form-item label="Promotion name" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="Zones" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="Please select a zone">
                    <el-option label="Zone No.1" value="shanghai" />
                    <el-option label="Zone No.2" value="beijing" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
  
<script lang="ts" setup>

import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { ElMessage, ElMessageBox } from 'element-plus'


//弹窗
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})




//用户显示列表查询数据
const formInline = reactive({
    roleName: '',
    isDel: null,
    pageIndex: 1,
    PageSize: 10,
    totalCount: 0,
    pageCount: 0,
})

//用户列表数据
const tableData = ref([]);


//显示用户列表
const Show = () => {
    axios({
        url: 'http://localhost:5102/api/RBACRead/RoleQuery',
        method: 'get',
        params: {
            roleName: formInline.roleName,
            isDel: formInline.isDel,
            pageIndex: formInline.pageIndex,
            PageSize: formInline.PageSize,
        }
    }).then(res => {
        tableData.value = res.data.data.data;
        formInline.totalCount = res.data.data.totalCount;
        formInline.pageCount = res.data.data.pageCount;
    })
}



//分页
const handleSizeChange = (val: number) => {
    formInline.PageSize = val;
    Show()
}
const handleCurrentChange = (val: number) => {
    formInline.pageIndex = val;
    Show()
}


//修改用户
const Upd = () => {

}


//查看用户
const Select = () => {

}



//删除用户
const Del = () => {

}


//分配权限
const Assignment = () => {

}




onMounted(() => {
    Show();
})


</script>
  